<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            font-family: "microsoft yahei";
        }

        html,
        body {
            background-image: url({{ url_for('static', filename='images/login-bg.png') }});
            background-size: 100% 100%;
            height: 100%;
        }

        .login {
            position: absolute;
            background-color: rgba(255, 255, 255, 1);
            top: 10%;
            left: 20%;
            right: 40%;
            bottom: 10%;
            border-radius: 5px;
        }

        .title,
        .p,
        .u,
        .a,
        .b,
        .c,
        .d,
        .e,
        .f,
        .l,
        .k,
        .g,
        .h,
        .i,
        .j,
        .cnn,
        .v,
        .tips {
            position: absolute;
            width: 100%;
        }

        input.pwd,
        .uname1,
        .uname2,
        .uname5,
        .uname4,
        .uname3,
        .uname6,
        .uname7,
        .uname8,
        .uname9,
        .uname10,
        .uname {
            height: 35px;
            border: 0px;
            border-radius: 5px;
            width: 70%;
            padding-left: 18px;
            box-sizing: border-box;
        }

        input.da {
            height: 15px;
            border: 0px;
            width: 20%;
            padding-left: 40px;
            text-align: center;
        }

        input.da1 {
            height: 15px;
            border: 0px;
            width: 20%;
            padding-left: 40px;
            text-align: center;
        }

        input.uname {
            background: url({{ url_for('static', filename='images/login_user.png') }}) no-repeat left;
            background-color: #F2F2FA;
        }

        select.uname1 {
            background-color: #F2F2FA;
        }

        select.uname2 {
            background-color: #F2F2FA;
        }

        select.uname3 {
            background-color: #F2F2FA;
        }

        select.uname4 {
            background-color: #F2F2FA;
        }

        input.uname7 {
            background: url({{ url_for('static', filename='images/login_user.png') }}) no-repeat left;
            background-color: #F2F2FA;
        }

        input.uname8 {
            background: url({{ url_for('static', filename='images/login_user.png') }}) no-repeat left;
            background-color: #F2F2FA;
        }

        input.uname9 {
            background-color: #F2F2FA;
        }

        input.uname10 {
            background-color: #F2F2FA;
        }

        input.uname5 {
            background: url({{ url_for('static', filename='images/login_user.png') }}) no-repeat left;
            background-color: #F2F2FA;
        }

        input.uname6 {
            background: url({{ url_for('static', filename='images/login_user.png') }}) no-repeat left;
            background-color: #F2F2FA;
        }

        input.pwd {
            background: url({{ url_for('static', filename='images/login_user.png') }}) no-repeat left;
            background-color: #F2F2FA;
        }

        input.ui {
            background-color: #467FE6;
            height: 35px;
            width: 50%;
            border: 0px;
            border-radius: 5px;
            color: #FFF;
            font-size: 16px;
            text-align: center;
        }

        input.uw {
            background-color: #467FE6;
            height: 35px;
            width: 50%;
            border: 0px;
            border-radius: 5px;
            color: #FFF;
            font-size: 16px;
            text-align: center;
        }

        .title {
            top: 0%;
            bottom: 80%;
            text-align: center;
            font-size: 25px;
            font-weight: bold;
            padding-top: 10px;
            box-sizing: border-box;
        }

        .cnn {
            top: 10%;
            bottom: 60%;
            left: 15%;
            font-size: 16px;
            color: #929090;
        }

        .g {
            top: 17%;
            bottom: 24%;
            left: 10%;
        }

        .h {
            top: 26%;
            bottom: 33%;
            left: 10%;
        }

        .i {
            top: 35%;
            bottom: 42%;
            left: 10%;
        }

        .j {
            top: 44%;
            bottom: 51%;
            left: 10%;
        }

        .p {
            top: 17%;
            bottom: 24%;
            left: 10%;
        }

        .u {
            top: 26%;
            bottom: 33%;
            left: 10%;
        }

        .a {
            top: 35%;
            bottom: 42%;
            left: 10%;
        }

        .b {
            top: 44%;
            bottom: 51%;
            left: 10%;
        }

        .c {
            top: 53%;
            bottom: 60%;
            left: 10%;
        }

        .d {
            top: 62%;
            bottom: 69%;
            left: 10%;
        }

        .e {
            top: 71%;
            bottom: 78%;
            left: 10%;
        }

        .f {
            top: 80%;
            bottom: 87%;
            left: 10%;
        }

        .l {
            top: 90%;
            left: 22%;
            bottom: 2%;
        }

        .k {
            top: 55%;
            left: 22%;
            bottom: 38%;
        }
    </style>

</head>

<body>
    <div class="login">
        <div class="title">
            新手注册
        </div>
        <div class="cnn">
            <input type="radio" class="da " name="322" id="che" onclick=" stutype() " checked="checked " />学生
            <input type="radio" class="da1 " name="320 " id="mux" onclick="systype() " /> 管理员
        </div>
         <form method="post" action="{{url_for('registerload')}}">
        <div id="uccc ">
                <div class=" p ">姓名
                    <input type="text " class="pwd " name="userName" />
                </div>
                <div class="u ">学号
                    <input type="text " class="uname " name="id" id="akak " onbeforepaste=" clipboardData.setData( 'text',clipboardData.getData( 'text').replace(/[^\d]/g, '')) " onkeypress="value=value.replace(/[^\d]/g, '') " maxlength="10
                " placeholder="请输入13位数字 " />
                </div>
                <div class="a ">年龄
                    <select class="uname1 " name="age" onclick=buu()>
                    <option >15 </option>
                    <option >16 </option>
                    <option >17 </option>
                    <option >18 </option>
                    <option >19 </option>
                    <option selected="selected ">20 </option>
                    <option >21 </option>
                    <option >22 </option>
                    <option >23 </option>
                    <option >24 </option>
                    </select>
                </div>
                <div class="b ">性别
                    <select class="uname2 " name="sex" />
                    <option>男</option>
                    <option selected="selected ">女</option>
                    </select>
                </div>
                <div class="c ">院系
                    <select class="uname3 " name="xi" />
                    <option selected="selected ">生命</option>
                    <option>计算机</option>
                    <option>自动化</option>
                    <option>机电</option>
                    <option>数学</option>
                    <option>外国语</option>

                    </select>
                </div>
                <div class="d ">年级
                    <select class="uname4 " name="grade" />
                    <option>15级 </option>
                    <option>16级 </option>
                    <option>17级 </option>
                    <option>18级 </option>
                    <option>19级 </option>
                    <option selected="selected ">20级 </option>
                    <option>21级 </option>
                    </select>
                </div>
                <div class="e ">密码
                    <input type="password " class="uname5 " id="neee " name="pass" placeholder="请输入密码,格式为6-20位数字、字母或者下划线 " />
                </div>
                <div class="f ">确认
                    <input type="password " class="uname6 " id="nuuu " name="conpas" placeholder="请再次输入密码 " />
                </div>
                <div class="l ">

<!--                    <span><input class="ui " type="submit " id="fm " onclick = functio(1) value=" 提交 " ></span>-->
                    <input class="ui " type="submit" id="fm " onclick = functio(1)   value=" 提交 " >
<!--                    <span><input class="ui " type="submit " id="fm "  value=" 提交 " ></input></span>-->
                     </div>

            </div>
        </form>
        <div id="ucccd " class="daaa " style="display:none ">
            <form method="post" action="{{url_for('registerloadguan')}}">
                <div class="g ">姓名
                    <input type="text " class="uname7 " name="userName" />
                </div>
                <div class="h ">账号
                    <input type="text " class="uname8 " name="id" />
                </div>
                <div class="i ">密码
                    <input type="text " class="uname9 " id="unnn " name="pas" placeholder="请输入密码,格式为6-20位数字、字母或者下划线 " />
                </div>
                <div class="j ">确认
                    <input type="text " class="uname10 " id="nooo " name="conpas" placeholder="请再次输入密码 " />
                </div>
                <div class="k ">
                    <span><input class="uw " type="submit" id="fn " onclick = functio(2) value="提交"></input></span>
                </div>
            </form>
        </div>
    </div>
</body>
</body>

</html>
<script>
    function buu() {
        var u = document.getElementById("akak ");
        if (u.value.length < 10) {
            alert("重新输入学号 ");
            u.value = " ";
        }
    }


    function stutype() {
        var k = document.getElementById("uccc ");
        mux.checked = false;
        k.style.display = ' table-row ';
        k = document.getElementById("ucccd ");
        k.style.display = 'none ';
        che.checked = true;
    }

    function systype() {
        mux.checked = true;
        che.checked = false;
        var k = document.getElementById("uccc ");
        k.style.display = 'none ';
        k = document.getElementById("ucccd ");
        k.style.display = 'table-row ';
    }
    var uq = document.getElementById("neee ");
    var eq = document.getElementById("nuuu ");
    var uw = document.getElementById("unnn ");
    var ew = document.getElementById("nooo ");

    function functio(num) {
        if (num == 1) {
            var u = uq;
            var e = eq;
        } else {
            var u = uw;
            var e = ew;
        }
        if (!/^[\w]{6,20}$/.test(u.value)) {
            alert(" 新密码不合法！ ");
            u.value = '';
            e.value = '';
            u.focus();
            return false;
        }
        if (u.value != e.value) {
            alert(" 两次输入的新密码不++一致，请重新输入！ ");
            u.value = '';
            e.value = '';
            u.focus();
            return false;
        }
        else{
            // window.location.href='{{url_for('hello_world')}}'
            return true;
        }

    }
</script>